<template>
	<view class="u-page">
		<view class="header">
			<view class="nav-bar">
			<uni-nav-bar left-icon="back" @clickLeft="goback()" color="#ffffff" :border="border"  statusBar="true" backgroundColor="transparent">
				 <view slot="left" class="sitename">{{title}}</view>
			</uni-nav-bar>
			      
			</view>
		</view>
		<view class="content" v-if="type == 1">
			<view class="projecttitle">{{data.title}}</view>
			<view class="projectTag">
				项目类型
				<block v-for="(item,index) in data.tag" :key="index">
						<text class="tag" type="primary">{{item}}</text>
				</block>
				
			</view>
			<view class="projectcontent">
				<!-- <rich-text :nodes="data.projectInfo"></rich-text> -->
				<u-parse :content="data.projectContent" ></u-parse>
			</view>
		</view>
		<view class="content" v-if="type == 2">
			<view class="projecttitle">{{data.title}}</view>
			<view class="projectTag detail-bg">
				项目优势
			</view>
			<view class="projectcontent">
				<!-- <rich-text :nodes="data.projectAdvantage"></rich-text> -->
				<u-parse :content="data.projectAdvantage" ></u-parse>
				
			</view>
		</view>
		<view class="content" v-if="type == 3">
			<view class="projecttitle">{{data.title}}</view>
			<view class="projectTag deal-bg">
				投资方案
			</view>
			<view class="projectcontent">
				<!-- <rich-text :nodes="data.investmentContent"></rich-text> -->
				<u-parse :content="data.investmentContent" ></u-parse>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	
	export default {
		components: {
		    uParse
		  },
		data() {
			return {
				pid:'',
				title:'',
				type:1,
				strings: '',
				data:{}
			}
			
		},
		onLoad(option) {
			console.log('11111',option)
			if(option.type == 1){
				this.title="项目介绍"
			}else if(option.type == 2){
				this.title="项目优势"
			}else{
				this.title="投资方案"
			}
			this.type=option.type
			this.pid=option.id
			this.project()
		},
		methods: {
			async project(pid){
				
				const project = await this.GQL({
					"operationName": "allSlProjects",
					"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title type tag status pic pid contentInfo projectInfo projectContent projectContacts projectAdvantage projectAddress prijectBusiness power investmentContent contactsPhone contactsWx teamInfo } } }",
					"variables": {"filter": {"pid": {"equalTo": this.pid}}}
				})
				console.log('1---',project)
				if(project){
					project.data.allSlProjects.nodes[0].tag = project.data.allSlProjects.nodes[0].tag.split(',')
					this.data = project.data.allSlProjects.nodes[0]
				}
			},
			goback(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-page{
		background-color: #FBFCFE;
	}
	 .header{
	 	width: 100%;
	 	height: 260px;
	 	/* color: #FFFFFF; */
		background: linear-gradient(#C7171E, #f0f2f5); /* 标准的语法 */
	 	.nav-bar{
	 		.uni-navbar__header{
	 			padding-left:15px ;
	 		}
	 		.uni-navbar__header-btns-left{
	 			width: 150px;
	 		}
	 		.sitename{
	 			height: 50px;
	 			font-size: 18px;
	 			font-family: PingFangSC-Medium, PingFang SC;
	 			font-weight: 550;
	 			text-align: left;
	 			color: #FFFFFF;
	 		}
	 	}
	 }
	 .content{
		 position: relative;
		 margin: 30rpx;
		 padding: 30rpx;
		 background-color: #FFFFFF;
		 min-height: 100vh;
		 border-radius: 10px;
		 top: -190px;
		 .projecttitle{
			 font-size: 32rpx;
			 color: #161E3E;
			 font-weight: 600;
			 padding-top: 10rpx;
			 // min-height: 90rpx;
			 margin-bottom: 18px;
			 box-sizing: border-box;
		 }
		 .projectTag{
			 // margin: 5px 15px 0px 15px;
			 font-size: 30rpx;
			 height: 38rpx;
			 line-height: 38rpx;
			 padding-left: 40rpx;
			 &.detail-bg{
				 background-image: url(../../static/icon/detail.png);
				 background-repeat: no-repeat;
				 background-size: 32rpx 32rpx;
				 background-position: left center;
			 }
			 &.deal-bg{
				 background-image: url(../../static/icon/fa.png);
				 background-repeat: no-repeat;
				 background-size: 32rpx 32rpx;
				 background-position: left center;
			 }
			 .tag{
				margin-left: 10rpx;
			 	height: 38rpx;
			 	line-height: 38rpx;
			 	padding: 4rpx 10rpx;
			 	border-radius: 20rpx;
			 	border: 2rpx solid;
			 	font-size: 22rpx!important;
			 	margin-left: 10rpx!important;
			 	box-sizing: border-box;
			 	vertical-align: middle; 
			 	&:first-child{
			 		// margin-left: 0px!important ;
			 		background-color: #FFE1E2!important;
			 		border-color: #FFB4B7!important;
			 		color: #C7171E!important;
			 	}
			 	&:nth-child(2n){
			 		background-color: #FFEBCD!important;
			 		border-color: #FFD598!important;
			 		color: #EC8C00!important;
			 	}
			 	&:nth-child(3n){
			 		background-color: #DCFFE3!important;
			 		border-color: #B1F7BF!important;
			 		color: #02B327!important;
			 	}
			 	&:nth-child(4n){
			 		background-color: #EFE4FF!important;
			 		border-color: #A88AD5!important;
			 		color: #4500AC!important;
			 	}
			 }
		 }
		 .projectcontent{
			 margin: 15px 0;
			 color: #767B8D;
		 }
		 
		 .projectUser{
			 margin: 10px;
			 color: #161E3E;
			 font-size: 16px;
			 image{
				 width: 13px;
				 height:13px;
				 padding-right: 5px;
			 }
			 .name{
				 color: #767B8D;
				 margin-left: 10px;
			 }
			
		 }
		 .CarId{
			 padding: 10px 0px 20px 0px;
			 font-size: 15px;
			 color: #007AFE;
		 }
		 .ID{
			 font-size: 15px;
			 color: #838898;
		 }
		 .projectId{
			 margin: 20px 10px 20px 10px;
			 border-bottom: 1px solid #D8D8D8;
		 }
		 .projectAddress{
			  margin: 20px 10px 20px 10px;
		 }
		 .projectFile{
			  margin: 20px 10px 20px 10px;
		 }
	 }

</style>
